import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
} from 'react-native';
import {StackNavigator, TabNavigator} from 'react-navigation';
import {PageOne} from './PageOne';
import {PageTwo} from "./PageTwo";
import {PageThree} from "./PageThree";
import Homes from '../pages/home';
import CustomIcons from '../components/CustomIcons'


export class Home extends React.Component {

    static navigationOptions = {
        tabBarLabel: '首页',

        tabBarIcon: ({focused, tintColor}) => {
            if (focused) {
                return (
                    <CustomIcons name="icon-home-hover" size={25} color="#64bcc1"></CustomIcons>
                );
            }
            return (
                <CustomIcons name="icon-home" size={25} color="#64bcc1"></CustomIcons>
            );

        },
    };

    render() {
        return (
            <View style={styles.container}>

                <Homes></Homes>

            </View>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
    },
});

const tabNavigatorScreen = TabNavigator({
    Home: {screen: Home},
    PageOne: {screen: PageOne},
    PageTwo: {screen: PageTwo},
    PageThree: {screen: PageThree}
}, {
    tabBarOptions: {
        activeTintColor: '#64bcc1', // 显示在底端，android 默认是显示在页面顶端的
        inactiveTintColor: '#999999',// 文字和图片未选中颜色
        showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
        labelStyle: {
            marginBottom: 2,
            marginTop: 6,
        },
        style: {
            marginBottom: -5,
            backgroundColor: '#f3f4f6'
        },
        tabStyle: {
        }
    },
    tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
});


const MyApp = StackNavigator({
    Home: {screen: tabNavigatorScreen},

}, {
    headerMode: 'none',
});


AppRegistry.registerComponent('SF_App', () => MyApp);


